<template>
  <div class="min-h-screen bg-gray-50 font-sans flex">
    <!-- Side Navigation -->
    <aside :class="['bg-white shadow-sm transition-all duration-300', 'w-60']">
      <el-menu
          :default-active="activeMenu"
          class="h-[calc(100vh-4rem)]"
          @select="handleSelect"
      >
        <el-menu-item index="/">
          <el-icon><HomeFilled /></el-icon>
          <template #title>首页</template>
        </el-menu-item>

        <el-sub-menu index="employee">
          <template #title>
            <el-icon><User /></el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item index="/med">护工管理</el-menu-item>
          <el-menu-item index="/holidays">请假管理</el-menu-item>
          <el-menu-item index="/salary">工资管理</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="elderly">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>老人管理</span>
          </template>
          <el-menu-item index="/room">房间管理</el-menu-item>
          <el-menu-item index="/eld">老人管理</el-menu-item>
          <el-menu-item index="/goods">商品管理</el-menu-item>
          <el-menu-item index="/server">服务管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="nursing">
          <template #title>
            <el-icon><FolderOpened /></el-icon>
            <span>公用管理</span>
          </template>
          <el-menu-item index="/order">订单管理</el-menu-item>
          <el-menu-item index="/category">分类管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </aside>
    <div class=" flex-1 flex flex-col overflow-hidden">
      <!-- Top Navigation -->
      <header  ref="header" class="bg-white shadow-sm">
        <div class="container mx-auto px-6 py-4 flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
              <i class="el-icon-user-solid text-white text-xl"></i>
            </div>
            <h1 class="text-xl font-semibold text-gray-800">养老易管理系统</h1>
          </div>
          <div class="relative w-1/3">
            <input
                type="text"
                placeholder="搜索服务、老人或员工..."
                class="w-full py-2 px-4 pl-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-transparent"
            >
            <i class="el-icon-search absolute left-3 top-3 text-gray-400"></i>
          </div>
          <div class="flex items-center space-x-6">
            <el-dropdown>
              <button class="flex items-center space-x-1">
                <i class="el-icon-user text-gray-600 text-xl"></i>
                <span class="text-sm text-gray-600">{{ userStore.userInfo.username}}</span>
              </button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <i class="el-icon-user mr-2"></i>
                    <span @click="handleChangePassword">密码修改</span>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <i class="el-icon-lock mr-2"></i>
                    <span @click="switchAccounts">切换账号</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <i class="el-icon-switch-button mr-2"></i>
                    <span @click="logout">退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </header>
      <RouterView />
    </div>
  </div>
<!-- 修改密码对话框开始 -->
  <el-dialog v-model="showDialog" title="修改密码" width="30%">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input type="password" v-model="form.oldPassword" placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="form.newPassword" placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="form.confirmPassword" placeholder="请输入确认密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changePassword">修改密码</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
<!-- 修改密码对话框结束 -->
</template>
<script setup>
import { RouterView, RouterLink } from 'vue-router';
import router from '../../router';
import {onMounted, reactive, ref} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, UserFilled, HomeFilled, User, FolderOpened,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { useTokenStore } from '@/stores/token';
import LoginApi from "@/api/loginApi.js";
import {useUserStore} from "@/stores/user.js";
const userStore = useUserStore();
const tokenStore = useTokenStore();
const activeMenu = ref('/');
const showDialog = ref(false);
const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const formRef = ref(null); // 确保 ref 初始化为 null
// 修改密码对话框校验规则
const rules = reactive({
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger:'blur' }
  ]
  , confirmPassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger:'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
})
// 点击修改密码按钮
const handleChangePassword = () => {
  form.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
  showDialog.value = true
}
// 修改密码
const changePassword = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      LoginApi.updatePassword(userStore.userInfo.username,
          form.value.oldPassword,
          form.value.newPassword,
          form.value.confirmPassword)
        .then(resp => {
          if (resp.code == 10000) {
            ElMessage.success({
              message: "修改密码成功",
              duration: 1200,
              onClose: () => {
                showDialog.value = false
                logout();
              }
            })
          } else {
            ElMessage.error(resp.msg)
          }
        })

    } else {
      ElMessage.error({
        message: "请检查表单输入是否正确",
        duration: 1200
      })
    }
  })
}
const handleSelect = (key, keyPath) => {
  router.push(key);
}
const logout = () => {
  ElMessage.success({
    message: "退出成功",
    duration: 1200,
    onClose: () => {
      router.push('/login')
      tokenStore.$reset()
    }
  })
}
const switchAccounts = () => {
  ElMessage.success({
    message: "切换账号",
    duration: 1200,
    onClose: () => {
      router.push('/login')
      tokenStore.$reset()
    }
  })
};
</script>


<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 280px;
  min-height: 400px;
}
</style>